<template>
  <div>
    <el-form ref="refForm" :model="formData">
      <el-form-item
        v-if="formData.type === 'editName'"
        label="名称"
        prop="name"
      >
        <el-input v-model="formData.name" placeholder="请输入分组名称" />
      </el-form-item>
      <span v-if="formData.type === 'removeExpert'">
        <div style="min-height: 100px;text-align: center;">
          <h3 style="line-height: 80px;">{{ `确认移除【${formData.name}】分组下的【${formData.expertName}】专家吗?` }}</h3>
        </div>
      </span>
      <span v-if="formData.type === 'replaceExpert'">
        <el-card class="sun-el-card">
          <el-table ref="multipleTable" :header-cell-style="{color:'#000000'}" :data="list" border fit highlight-current-row>
            <el-table-column key="0" align="center" :width="80" :render-header="renderHeader">
              <template slot-scope="{row}">
                <el-checkbox v-model="row.checked" @change="handleCheckedCitiesChange($event, row)" />
              </template>
            </el-table-column>
            <el-table-column key="1" label="姓名" prop="name" />
            <el-table-column key="2" align="center" label="职称" prop="job_title.name" />
            <el-table-column key="3" align="center" label="电话" prop="mobile" />
            <el-table-column key="4" align="center" label="学校">
              <template slot-scope="{row}">
                {{ row.school_name ? row.school_name : '本校' }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </span>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ProcessCommonEvaluationExpertGroups',
  props: {
    source: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    show_expertGroups() {
      return this.$parent.$parent.show_expertGroups
    }
  },
  created() {
    if (!this.show_expertGroups) {
      // this.$set(this, 'list', [])
      // this.list = []
    }
  },
  methods: {
    renderHeader(h) {
      return (
        <el-checkbox indeterminate={this.isindeterminate} disabled v-model={ this.checkedAll } onChange={(e) => this.handleCheckAllChange(e)}></el-checkbox>
      )
    },
    handleCheckAllChange(checked) {
    },
    handleCheckedCitiesChange(checked, row) {
      const _that = this
      _that.list.forEach((item) => {
        if (checked) {
          if (row.id === item.id) {
            item.checked = true
            _that.$set(item, 'checked', true)
            _that.$set(_that.$parent.$parent.expertGroupsData, 'new_teacher_id', item.id)
            _that.$set(_that.$parent.$parent.expertGroupsData, 'teacher', { name: item.name, school_name: item.school_name, job_title: { name: item.job_title.name }})
          } else {
            _that.$set(item, 'checked', false)
          }
        } else {
          _that.$set(item, 'checked', false)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .sun-el-card{
    margin: 0px !important;
  }
</style>
